<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="employee.js"></script>
        <script>
            function $(id) {
                return document.getElementById(id)
            }

            window.onload = function () {
                initTable(emArray);
            };

            /*
            表格数据初始化
             */
            function initTable(arr) {
                let str = "";
                arr.forEach(n => {
                    str += `<tr><td>${n.code}</td>
                            <td>${n.name}</td>
                            <td>${n.sex}</td>
                            <td>${n.job}</td>
                            <td>${n.money}</td>
                            <td><input type="button" value="删除" onclick="del(${n.code})"><input type="button" value="修改" onclick="findInfo(${n.code})"></td></tr>`;
                });
                $("data").innerHTML = str;
            }

            /**
             * 查找员工
             */
            function findEmployee() {
                let newArray = emArray.filter(n => n.name.indexOf($("name").value) != -1);
                initTable(newArray);
            }
            function showAdd() {
                $("addDiv").style.visibility = "visible"
            }
            function getSex() {
                let sexArray = document.getElementsByName("sex");
                for (let i = 0; i < sexArray.length; i++) {
                    if (sexArray[i].checked){
                        return sexArray[i].value;
                    }
                }
            }
            

            function checkField(txtId,divId,expr,errorInfo) {
                let txt = document.getElementById(txtId);
                let div = document.getElementById(divId);
                if (expr.test(txt.value)){
                    div.style.color = "green"
                    div.innerHTML="验证通过"
                    return true
                }
                else{
                    div.style.color = "yellow"
                    div.innerHTML = errorInfo;
                    return false
                }

            }

            //一堆的验证

            function checkId() {
                return checkField("addId","idDiv",/^([1-9]|[\d+])$/,"id必须是数字")
            }
            function checkName() {
                return checkField("addName","nameDiv",/^[a-zA-Z\u4e00-\u9fa5]{2,}$/,"名字必须是两个以上的汉字或者字母")
            }
            function checkJob() {
                return checkField("addJob","jobDiv",/^[\u4e00-\u9fa5]{2,}$/,"职位必须是两个以上的汉字")
            }
            function checkMoney() {
                return checkField("addMoney","moneyDiv",/^[\d]{4,5}$/,"工资必须是4或5位数")
            }
            function checkUpJob() {
                return checkField("updateJob","updateJobSpan",/^[\u4e00-\u9fa5]{2,}$/,"职位必须是两个以上的汉字")
            }
            function checkUpMoney() {
                return checkField("updateMoney","updateMoneySpan",/^[\d]{4,5}$/,"工资必须是4或5位数")
            }


            function addData() {
                let id = emArray.findIndex(n => n.code == $("addId").value);
                if (id != -1){
                    $("idDiv").style.color = "yellow";
                    $("idDiv").innerHTML = "编号已存在";
                    return;
                }

                if (!(checkName() & checkId() & checkJob() & checkMoney())){
                    return;
                }

                var obj = {
                    code: parseInt($("addId").value),
                    name: $("addName").value,
                    sex: getSex(),
                    job: $("addJob").value,
                    money: $("addMoney").value
                };
                emArray.push(obj);
                console.log(emArray);
                initTable(emArray);

                $("addDiv").style.visibility = "hidden";

                //清理
                $("addId").value = "";
                $("idDiv").innerHTML="";
                $("addName").value = "";
                $("nameDiv").innerHTML="";
                $("addJob").value="";
                $("jobDiv").innerHTML="";
                $("addMoney").value="";
                $("moneyDiv").innerHTML="";
            }

            /**
             * 通过下标删除
             * @param id
             */
            function del(id) {
                let index = emArray.findIndex(n=>n.code==id);
                console.log(index);
                emArray.splice(index,1);
                initTable(emArray);
            }

            /**
             * 显示员工
             *
             *
             */
            function findInfo(id) {
                //  根据id查找得到员工对象
                newObj = emArray.find(n => n.code == id);
                //  填充已有员工信息
                $("codeSpan").innerHTML = newObj.code;
                $("nameSpan").innerHTML = newObj.name;
                $("sexSpan").innerHTML = newObj.sex;
                $("updateJob").value = newObj.job;
                $("updateMoney").value = newObj.money;
                //  显示员工信息界面
                $("updateDiv").style.visibility = "visible";
            }

            /**
             * 修改员工信息
             */
            function updateInfo() {
                //  获取修改信息
                var updateJob = $("updateJob").value;
                var updateMoney = $("updateMoney").value;
                //  输入有效性验证
                if (checkUpJob() & checkUpMoney()) {
                    newObj.job = updateJob;
                    newObj.money = updateMoney;
                }else {
                    return;
                }
                console.log(emArray)
                //  刷新员工信息表
                initTable(emArray);
                //  关闭修改信息界面
                $("updateDiv").style.visibility = "hidden";
                //  清除原先数据
                $("jobSpan").innerHTML = "";
                $("moneySpan").innerHTML = "";
            }

            var isAsc = true;
            function sortEmployee(filedName,isAsc) {
                emArray.sort((a,b)=>{
                    var x = isAsc?a[filedName]-b[filedName]:b[filedName]-a[filedName];
                    return x
                })
                initTable(emArray)
                isAsc = !isAsc
            }


        </script>
        <style>
            .dialog{
                width: 100%;
                height: 100%;
                position: absolute;
                left:0px;
                top: 0px;
                background-color: rgba(255,0,0,.5);
                display: flex;
                visibility: hidden;
                justify-content: center;
                align-items: center;
            }
            .content{
                width: 50%;
                height: 50%;
                background-color: white;
                position: relative;
                display: table;
                padding: 30px;
            }
        </style>
    </head>
    <body>
        <p>段落</p>
        <table border="1" cellspacing="0" width="60%">
            <thead>
                <th onclick="sortEmployee('code',true)">编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th onclick="sortEmployee('money',false)">工资</th>
                <th>操作</th>
                </tr>
            </thead>

            <tbody id="data"></tbody>

        </table>
        请输入姓名:<input type="text" id="name"> <input type="button" value="查找" onclick="findEmployee()"><br>
        <input type="button" value="添加" onclick="showAdd()">

        <div id="addDiv" class="dialog"  style="visibility: hidden;">
            <div class="content">
                编号:<input type="text" id="addId">
                <div id="idDiv"></div>
                <br/>
                姓名:<input type="text" id="addName">
                <div id="nameDiv"></div>
                <br/>
                性别:<input type="radio"name="sex" checked value="男">男
                <input type="radio"name="sex" value="女">女<br/>
                职位:<input type="text" id="addJob">
                <div id="jobDiv"></div>
                <br/>
                工资:<input type="text" id="addMoney">
                <div id="moneyDiv"></div>
                <br/>
                <input type="button" onclick="addData()" value="确定">
            </div>
        </div>

        <div id="updateDiv" class="dialog">
            <div class="content">
                编号：<span id="codeSpan"></span><br>
                姓名：<span id="nameSpan"></span><br>
                性别：<span id="sexSpan"></span><br>
                职位：<input type="text" id="updateJob" onblur="checkJob()"><span id="updateJobSpan"></span><br>
                工资：<input type="text" id="updateMoney" onblur="checkMoney()"><span id="updateMoneySpan"></span><br>
                <input type="button" value="修改" onclick="updateInfo()">
            </div>
        </div>
    </body>
</html>